import { useEffect, useState } from 'react';
import { Table, Input, Spin } from 'antd';
import './covidStatus.css';
import API from '../../api/index';
import columns from './columns';
import InteractiveMap from './interactiveMap';
const { Search } = Input;

function CovidStatus(props) {
  const [dataSource, setDataSource] = useState([]);
  const [spinning, setSpinning] = useState(false);

  const search = async (val) => {
    setSpinning(true);
    let res = await API.getWholeCovidStatus(val);
    res.forEach((item, index) => {
      item.key = index;
    });
    console.log(res);
    setDataSource(res);
    setSpinning(false);
  }

  useEffect(() => {
    search('');
  }, []);

  const onSearch = (val) => {
    console.log('onSearch', val);
    search(val);
  };

  return (
    <div className="covid-status-warp">
      <div className="search">
        <Search
          placeholder="Please enter the city name~"
          allowClear
          enterButton="Search"
          size="large"
          onSearch={onSearch}
        />
      </div>
      <Spin tip="Loading..." spinning={spinning}>
        <Table dataSource={dataSource} columns={columns} />
      </Spin>
      <InteractiveMap />
    </div>
  );
}
export default CovidStatus;